<template>
	<div>
		<div style="margin-bottom: 20px;">
			<el-button type="primary" @click="menuDialogAdd" style="margin-left: 20px;" plain>新增菜单</el-button>
		</div>
		<div id="app">

			<el-table :data="allMenu" style="width: 100%;" ref="multipleTable" tooltip-effect="dark"
				@selection-change="handleSelectionChange" row-key="id"
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}">

				<el-table-column prop="id" label="编号" width="100">
				</el-table-column>

				<el-table-column prop="url" label="后端请求url" width="100">
				</el-table-column>

				<el-table-column prop="path" label="前端路由url" width="100">
				</el-table-column>

				<el-table-column prop="component" label="组件" width="100">
				</el-table-column>

				<el-table-column prop="name" label="菜单名" width="100">
				</el-table-column>

				<el-table-column prop="iconCls" label="图标" width="100">
				</el-table-column>

				<el-table-column prop="parentId" label="父级ID" width="100">
				</el-table-column>

				<el-table-column label="是否启用" width="160">
					<template slot-scope="scope">
						<el-radio-group v-model="scope.row.enabled" :fill="fill(scope.row.enabled)" text-color="#303133"
							disabled>
							<el-radio-button :label="1">启用</el-radio-button>
							<el-radio-button :label="0">关闭</el-radio-button>
						</el-radio-group>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="220">
					<template slot-scope="scope">
						<el-link type="warning" class="link-cs" @click="menuDialogUpdate(scope.row)">修改</el-link>
						<el-link type="danger" @click="menuDelete(scope.row.id)">删除</el-link>
					</template>
				</el-table-column>
			</el-table>
			<!-- 菜单弹框 -->
			<div>
				<el-dialog :title="menuTitle" :visible.sync="dialogAdd" width="30%">
					<el-form :model="menu" label-width="80px">
						<el-form-item label="上级菜单:">
							<el-cascader v-model="value"
							 @change="handleChange"
							  :props="{ checkStrictly: true }" clearable></el-cascader>
						</el-form-item>
						<el-form-item label="菜单图标:">
							<el-input v-model="menu.iconCls"></el-input>
						</el-form-item>
						<el-form-item label="菜单名称:">
							<el-input v-model="menu.name"></el-input>
						</el-form-item>
						<el-form-item label="路由地址:">
							<el-input v-model="menu.path"></el-input>
						</el-form-item>
						<el-form-item label="组件路径:">
							<el-input v-model="menu.component"></el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-radio-group v-model="menu.enabled">
								<el-radio :label="1">正常</el-radio>
								<el-radio :label="0">停用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogAdd = false">取 消</el-button>
						<el-button type="primary" @click="openAdd">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

				//关于批量删除的id
				ids: [],

				//查询封装的参数
				//queryObj: {},

				//添加菜单弹框是否打开属性
				dialogAdd: false,

				//表格中数据、由后端传入
				allMenu: [],
				//queryMenu: [],

				//用户对象
				menu: {
					id: '',
					url: '',
					path: '',
					component: '',
					name: '',
					iconCls: '',
					parentId: '',
					enabled: '',
				},

				menuTitle: '',

				//级联选择器获取选中的value值
				value: [-1],

				//级联选择器options
				//menuLevel: [],

				likeQueryVo: {
					name: '',
				},
			}
		},
		methods: {
			//状态变化时，状态选中时颜色也改变
			fill(enabled) {
				if (enabled === 1) {
					return '#67C23A';
				}
				if (enabled === 0) {
					return '#F56C6C';
				}
			},

			//获取父级菜单id
			handleChange(value) {
				//console.log(value[value.length - 1]);
				this.menu.parentId = value[value.length - 1];
			},

			//点击打开添加菜单弹框
			menuDialogAdd() {
				//赋默认值
				this.menu.id = '';
				this.menu.url = '';
				this.menu.path = '';
				this.menu.component = '';
				this.menu.name = '';
				this.menu.iconCls = '';
				this.menu.parentId = '';
				this.menu.enabled = '';

				this.dialogAdd = true;
				this.menuTitle = '添加菜单';
			},

			//获取父级菜单id
			handleChange(value) {
				//console.log(value[value.length - 1]);
				this.menu.parentId = value[value.length - 1];
			},

			/* 确定添加方法 */
			openAdd() {
				this.postRequest('/menu/save', this.menu).then(result => {
					this.dialogAdd = false;
					if (result.code == 200) {
						this.queryDate();
					}
				});
			},

			//点击打开修改菜单弹框
			menuDialogUpdate(row) {
				//赋默认值
				this.menu.id = row.id;
				this.menu.url = row.url;
				this.menu.path = row.path;
				this.menu.component = row.component;
				this.menu.name = row.name;
				this.menu.iconCls = row.iconCls;
				this.menu.parentId = row.parentId;
				this.menu.enabled = row.enabled;
				this.value = [row.parentId];

				this.dialogAdd = true;
				this.menuTitle = '修改菜单';
			},

			//修改
			ofUpdate() {
				this.putRequest('/menu/saveUpdate', this.menu).then(result => {
					this.dialogAdd = false;
					if (result.code == 200) {
						this.queryDate();
					}
				});
			},

			//删除
			menuDelete(id) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/menu/delOne/" + id).then(result => {
						this.queryDate();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			//页面加载完之后调用的方法
			queryDate() {
				this.postRequest('/menu/allMenuList').then(result => {
					//console.log(result.data);
					this.allMenu = result.data.menuList;
					//this.menuLevel = result.data.menuLevel;
				})
			},
		},

		//页面加载完之后执行
		mounted() {
			this.queryDate();
		}
	}
</script>

<style>
	.link-cs {
		margin-right: 10px;
	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
</style>
